<!-- <template>
 <view class="content">
        <view class="title-box"> {{data.title}} </view>
        <view class="info-box">
            <view class="item"><u-icon name="clock" color="#999999"></u-icon> 活动时间：{{data.activity_time}}</view>
            <view class="item"><u-icon name="map" color="#999999"></u-icon> 地址： {{data.address}}</view>
        </view>
        <view class="form-box">
            <u--form labelPosition="left" labelWidth="80" :model="form" :rules="rules" ref="uForm">
                <u-form-item required label="姓名" prop="name" borderBottom ref="item1">
                    <u--input v-model="form.name" border="none"></u--input>
                </u-form-item>
                <u-form-item required label="手机号" prop="phone" borderBottom ref="item1">
                    <u--input v-model="form.phone" border="none"></u--input>
                </u-form-item> -->
                <!-- 扩展字段 -->
<!--                <u-form-item required v-for="(item,key) in extension" :label="item" :key="key" borderBottom ref="item1">
                    <u--input v-model="extension_form[key]" border="none"></u--input>
                </u-form-item>
            </u--form>
        </view>
        <view class="btn-box">
            <view class="amount-box">
                费用：
                <block v-if="data.fee>0">
                <text class="fee">￥</text><text class="fee num">{{data.fee*100/100}}</text>
                </block>
                <text class="fee fee num" v-else>免费</text>
            </view>
            <view class="btn">
                <u-button @click="submit" shape="circle" type="primary" text="立即报名"></u-button>
            </view>
        </view>
    </view>
</template> -->



<template>
    <view class="content">
        <view class="title-box"> {{data.title}} </view>
        <view class="info-box">
            <view class="item"><u-icon name="clock" color="#999999"></u-icon> 活动时间：{{data.activity_time}}</view>
            <view class="item"><u-icon name="map" color="#999999"></u-icon> 地址： {{data.address}}</view>
        </view>
        <view class="form-box">
            <u--form labelPosition="left" labelWidth="80" :model="form" :rules="rules" ref="uForm">
                <u-form-item required label="姓名" prop="name" borderBottom ref="item1">
                    <u--input v-model="form.name" border="none"></u--input>
                </u-form-item>
                <u-form-item required label="手机号" prop="phone" borderBottom ref="item1">
                    <u--input v-model="form.phone" border="none"></u--input>
                </u-form-item>
                <!-- 扩展字段 -->
                <u-form-item required v-for="(item,key) in extension" :label="item" :key="key" borderBottom ref="item1">
                    <u--input v-model="extension_form[key]" border="none"></u--input>
                </u-form-item>
            </u--form>
        </view>
        <view class="btn-box">
            <view class="amount-box">
                费用：
                <block v-if="data.fee>0">
                <text class="fee">￥</text><text class="fee num">{{data.fee*100/100}}</text>
                </block>
                <text class="fee fee num" v-else>免费</text>
            </view>
            <view class="btn">
                <u-button @click="submit" shape="circle" type="primary" text="立即报名"></u-button>
            </view>
        </view>
    </view>
</template>

<script>
	// export default {
	//         data() {
	//             return {
	//                 id: 0,
	//                 data: {},
	//                 form:{
	//                     name:'',
	//                     phone:'',
	//                 },
	//                 extension:{},
	//                 extension_form:{},
	//                 rules: {
	//                     name:{
	//                             required: true, 
	//                             message: '请输入姓名',
	//                             trigger: ['change','blur'],
	//                         },
	//                     phone: [
	//                         {
	//                             required: true, 
	//                             message: '请输入手机号',
	//                             trigger: ['change','blur'],
	//                         },
	//                         {
	//                             validator: (rule, value, callback) => {
	//                                 return uni.$u.test.mobile(value);
	//                             },
	//                             message: '手机号码不正确',
	//                             trigger: ['change','blur'],
	//                         }
	//                     ],
	//                 }
	//             }
	//         },
	//         onLoad(e) {
	//             this.checkAuth() //用户登录检测，如果没登录会自动跳转到登录页面
	//             this.id = e.id
	//             this.loadData()
	//         },
	//         methods: {
	//             loadData() {
	//                 let that = this
	//                 let params = {
	//                     id: this.id,
	//                 }
	//                 uni.$u.http.get('/activity/detail', {
	//                     params: params
	//                 }).then((res) => {
	//                     if (res.code == 1) {
	//                         this.data = res.data
	//                         if(this.data.extension_json!=''){
	//                             this.extension = JSON.parse(this.data.extension_json);
	//                             Object.keys(this.extension).forEach(function(key) {
	//                               that.extension_form[key] = ''
	//                             });
	//                         }
	//                     }
	//                 })
	//             },
	//             submit() {
	//                 let that = this
	                
	//                 this.$refs.uForm.validate().then(res => {
	//                     // 组织参数
	//                     let extension = ''
	//                     let notnull = true
	//                     Object.keys(this.extension_form).forEach(function(key) {
	//                         if(that.extension_form[key]==''){
	//                             uni.$u.toast(that.extension[key]+'不能为空')
	//                             notnull = false
	//                         }
	//                         extension +=  that.extension[key]+":"+that.extension_form[key] + " "
	//                     });
	//                     if(!notnull) return false // 扩展字段为空，中止提交
	//                     let form = {
	//                         activity_id:this.id,
	//                         name:this.form.name,
	//                         phone:this.form.phone,
	//                         fee:this.data.fee,
	//                         extension:extension,
	//                     }
	//                     uni.$u.http.post('/enrollment/add', form).then((res) => {
	//                         if(res.code==1){
	//                             uni.$u.toast(res.msg)
	//                             setTimeout(()=>{
	//                                 uni.navigateBack()
	//                             },2000)
	//                         }
	//                     })
	//                 }).catch(errors => {
	//                     uni.$u.toast(errors[0].message)
	//                 })
	//             }
	//         }
	//     }
	
	
	
	
	export default {
	        data() {
	            return {
	                id: 0,
	                data: {},
	                form:{
	                    name:'',
	                    phone:'',
	                },
	                extension:{},
	                extension_form:{},
	                rules: {
	                    name:{
	                            required: true, 
	                            message: '请输入姓名',
	                            trigger: ['change','blur'],
	                        },
	                    phone: [
	                        {
	                            required: true, 
	                            message: '请输入手机号',
	                            trigger: ['change','blur'],
	                        },
	                        {
	                            validator: (rule, value, callback) => {
	                                return uni.$u.test.mobile(value);
	                            },
	                            message: '手机号码不正确',
	                            trigger: ['change','blur'],
	                        }
	                    ],
	                }
	            }
	        },
	        onLoad(e) {
	            this.checkAuth() //用户登录检测，如果没登录会自动跳转到登录页面
	            this.id = e.id
	            this.loadData()
	        },
	        methods: {
	            loadData() {
	                let that = this
	                let params = {
	                    id: this.id,
	                }
	                uni.$u.http.get('/activity/detail', {
	                    params: params
	                }).then((res) => {
	                    if (res.code == 1) {
	                        this.data = res.data
	                        if(this.data.extension_json!=''){
	                            this.extension = JSON.parse(this.data.extension_json);
	                            Object.keys(this.extension).forEach(function(key) {
	                              that.extension_form[key] = ''
	                            });
	                        }
	                    }
	                })
	            },
	            submit() {
	                let that = this
	                
	                this.$refs.uForm.validate().then(res => {
	                    // 组织参数
	                    let extension = ''
	                    let notnull = true
	                    Object.keys(this.extension_form).forEach(function(key) {
	                        if(that.extension_form[key]==''){
	                            uni.$u.toast(that.extension[key]+'不能为空')
	                            notnull = false
	                        }
	                        extension +=  that.extension[key]+":"+that.extension_form[key] + " "
	                    });
	                    if(!notnull) return false // 扩展字段为空，中止提交
	                    let form = {
	                        activity_id:this.id,
	                        name:this.form.name,
	                        phone:this.form.phone,
	                        fee:this.data.fee,
	                        extension:extension,
	                    }
	                    uni.$u.http.post('/enrollment/add', form).then((res) => {
	                        if(res.code==1){
	                            uni.$u.toast(res.msg)
	                            setTimeout(()=>{
	                                uni.navigateBack()
	                            },2000)
	                        }
	                    })
	                }).catch(errors => {
	                    uni.$u.toast(errors[0].message)
	                })
	            }
	        }
	    }
</script>

<style lang="scss">
.content {
        padding: 20px;

        .title-box {
            font-size: 20px;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
            line-height: 1.5;
        }

        .info-box {
            padding: 8px 0;

            .item {
                font-size: 12px;
                font-weight: 400;
                line-height: 2;
                color: #999999;
                display: flex;

                /deep/.u-icon {
                    margin-right: 4px;
                }
            }
        }
        .form-box{
            
        }
        .btn-box{
            padding: 10px;
            background-color: #FFFFFF;
            z-index: 999;
            position: fixed;
            left: 0;
            bottom: 0;
            width: calc(100% - 20px);
            display: flex;
            justify-content: space-between;
            box-shadow:0px -2px 5px #efefef;
            .amount-box{
                .fee{
                    color:$uni-color-error;
                }
                .num{
                    font-size: 22px;
                }
            }
            /deep/.u-button{
                background: linear-gradient(90deg, rgba(20, 158, 227, 1) 0%, rgba(10, 23, 207, 1) 100%);
            }
            
        }
    }
</style>
